<script setup>
  import {ref, reactive, watch, watchEffect} from 'vue'

  let fullName = ref('');
  let firstName = ref('');
  let lastName = reactive({name:''});

  let fullName2 = ref('');
  let firstName2 = ref('2');
  let lastName2 = reactive({name:'1'});

  watch(() => firstName.value, (newValue, oldValue) => {
    console.log(`${oldValue}变成了${newValue}`);
    fullName.value = firstName.value + lastName.name
  });

  // deep：监听reactive数据时深度监听，一般不推荐
  //immediate：深度监听，进入页面立即执行一次
  watch(() => lastName.name, (newValue, oldValue) => {
    console.log(`${oldValue}变成了${newValue}`);
    fullName.value = firstName.value + lastName.name;
  }, {deep:true, immediate:true});

  watchEffect(() => {
    console.log(firstName2.value); console.log(lastName2.name);
    fullName2.value = firstName2.value + lastName2.name;
  });

</script>

<template>
  <div>
    全名:<input type="text" v-model="fullName">
    姓氏:<input type="text" v-model="firstName">
    名字:<input type="text" v-model="lastName.name"><br>
    全名:<input type="text" v-model="fullName2">
    姓氏:<input type="text" v-model="firstName2">
    名字:<input type="text" v-model="lastName2.name">
    
  </div>
</template>

<style scoped>
</style>